<template>
    <view>
		<view class="head"></view>
		<view class="txt"><text>附近的教练</text></view>
		<view class="page-body">
			<view style="
            position: fixed;
            z-index: 1;
            bottom: 40px;
            right: 0;">
			<image @click="testlist" src="/static/yogaimg/location.png" style="width: 40px;height: 40px;"></image>
				<image @click="test" src="/static/yogaimg/location.png" style="width: 40px;height: 40px;"></image>
				<image @click="location" src="/static/yogaimg/location.png" style="width: 40px;height: 40px;"></image>
			</view>
		</view>
		<map id="map" ref="map" :style="'width: ' + width + '; height: ' + height + ';'" :scale="map.scale" @regionchange="regionchange"
		 @updated="updated" :latitude="map.latitude" :longitude="map.longitude" :markers="covers" @callouttap="de" @markertap="de">
		</map>
		
		<view class="foot">
			<button @click="back1()">返回上一层</button>
		</view>
    </view>
</template>

<script>
	export default {
	    data() {
	        return {
				height: '500px',
				width: '500px',
				map: {
					scale: 13,
					latitude: 39.909,
					longitude: 116.39742
				},
				covers: [{
					latitude: 39.909,
					longitude: 116.39742
				}],
				list: [{
					"id": 1264640,
					"user_id": 335187,
					"age": 0,
					"gender": 0,
					"zodiac": 0,
					"flag": "",
					"secret": "",
					"place": "邵阳市",
					"views": 0,
					"likes": 1,
					"reviews": 0,
					"shares": 0,
					"text": "2020年只剩2个月了，无论你今年经历了什么，那都已成过往，希望今年的遗憾，都是明年惊喜的铺垫，加油加油！",
					"images": "",
					"weigh": 0,
					"collect": 1,
					"third_id": 53616924,
					"latitude": "27.267520",
					"longitude": "111.727120",
					"createtime": 1604206554,
					"updatetime": 1604208624,
					"deletetime": null,
					"status": "normal",
					"nickname": "Gentlema",
					"avatar": "https://image.aishencn.com/2020/10/20/002207441_40845724-user.jpg",
					"bio": "",
					"distance": 13419,
					"images_arr": [""]
				}, {
					"id": 1272720,
					"user_id": 36950,
					"age": 0,
					"gender": 0,
					"zodiac": 0,
					"flag": "",
					"secret": "",
					"place": "邵阳市",
					"views": 0,
					"likes": 2,
					"reviews": 0,
					"shares": 0,
					"text": "耶斯 莫拉",
					"images": "",
					"weigh": 0,
					"collect": 1,
					"third_id": 53626331,
					"latitude": "27.257640",
					"longitude": "111.747910",
					"createtime": 1604251112,
					"updatetime": 1604251277,
					"deletetime": null,
					"status": "normal",
					"nickname": "妖仙.",
					"avatar": "https://image.aishencn.com/2020/04/09/004135379_37869100-user.jpg",
					"bio": "",
					"distance": 27070,
					"images_arr": [""]
				}, {
					"id": 1316740,
					"user_id": 366172,
					"age": 0,
					"gender": 0,
					"zodiac": 0,
					"flag": "",
					"secret": "",
					"place": "邵阳市",
					"views": 0,
					"likes": 1,
					"reviews": 0,
					"shares": 0,
					"text": "生活不易丶且行且珍惜",
					"images": "https://image.aishencn.com/2020/11/04/215134979_98197351-bbs.jpg",
					"weigh": 0,
					"collect": 1,
					"third_id": 53655712,
					"latitude": "27.257430",
					"longitude": "111.732960",
					"createtime": 1604497896,
					"updatetime": 1604502723,
					"deletetime": null,
					"status": "normal",
					"nickname": "过往",
					"avatar": "https://image.aishencn.com/2020/11/04/182622730_98197351-user.venus/cache/ext/crop/1604518314542_jpg",
					"bio": "",
					"distance": 27190,
					"images_arr": ["https://image.aishencn.com/2020/11/04/215134979_98197351-bbs.jpg"]
			}],
				load: true
			};
		},
		onLoad() {
			// 创建地图上下文
			map = uni.createMapContext('map', this);
			uni.getSystemInfo({
				success: res => {
					this.height = res.windowHeight + 'px';
					this.width = res.windowWidth + 'px';
				}
			});

			this.location();
		},

		methods: {

			test() {
				map.getRegion({
					success: res => {
						map.getScale({
							success: ress => {

								this.covers = this.getFortMatMarkerList(res.northeast, res.southwest, ress.scale, this.list)
							}
						})
					}
				})
			},
			//根据东北 西南经纬度 以及后台返回标记点 格式化成小程序marker点
			getFortMatMarkerList(northeast, southwest, scale, backendMarkerList) {
				//屏幕中显示的经度的长度和纬度的长度
				let mapWidth = southwest.longitude - northeast.longitude;
				let mapHeight = northeast.latitude - southwest.latitude;
				//将屏幕中地图分割的横向 格子数和 纵向格子数
				let widthSize = scale;
				let heightSize = widthSize + parseInt(scale / 2);
				//计算每个格子的经纬度的长度
				let unitWidth = mapWidth / widthSize ;
				let unitHeight = mapHeight / heightSize ;
				console.log(widthSize,heightSize)
				console.log(unitWidth,unitHeight)
				let pointData = {};
				backendMarkerList.forEach(latLng => {
					//如果点在显示范围内
					if (latLng.latitude < northeast.latitude && latLng.latitude > southwest.latitude &&
						latLng.longitude < northeast.longitude && latLng.longitude > southwest.longitude) {
						let relativeX = latLng.longitude - northeast.longitude;
						let relativeY = latLng.latitude - southwest.latitude;
						//计算出这个点，处于哪个格子
						let x = parseInt(Math.floor(relativeX / unitWidth));
						let y = parseInt(Math.floor(relativeY / unitHeight));
						if (x < 0 || y < 0) {
							console.log('点位不在格子内', '失败');
						}
						//生成单元格点位数据
						let pointKey = x + ',' + y;
						if (pointData[pointKey] == undefined) {
							pointData[pointKey] = [];
						}
							pointData[pointKey].push(latLng);
					}
				});
				console.log('pointData', pointData.length);

				let resultMapArray = [];
				for (let y = 0; y < heightSize; y++) {
					for (let x = 0; x < widthSize; x++) {
						let pointKey = x + ',' + y;
						//筛选没有充电站点位的格子
						if (pointData[pointKey] != undefined) {
							let markerItem = {};
							//聚合点与单点共存 , 长度等于一 不聚合点
							if (pointData[pointKey].length == 1) {
								// console.log('不聚合点', pointData[pointKey][0]);

								markerItem = {
									id: pointData[pointKey][0].id,
									
									latitude: pointData[pointKey][0].latitude,
									longitude: pointData[pointKey][0].longitude,
									iconPath: pointData[pointKey][0].avatar,
									width: 30,
									height: 30
								}

								//长度大于一 聚合点
							} else if (pointData[pointKey].length > 1) {
								// console.log('聚合点');
								markerItem = {
									id: pointData[pointKey][0].id,
									
									latitude: pointData[pointKey][0].latitude,
									longitude: pointData[pointKey][0].longitude,
									iconPath: '/static/logo.png',
									width: 30,
									height: 30
								}
							}
							resultMapArray.push(markerItem);
						}
					}
				}
				console.log('resultMapArray', resultMapArray.length);
				return resultMapArray;
			},
			updated() {
				console.log('渲染完成');
			},
			// 当视野发生改变
			regionchange() {
				console.log('当视野发生改变');
				this.test();
			},
			//定位当前
			location() {
				console.log('开始获取地址');
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						map.moveToLocation({
							latitude: res.latitude,
							longitude: res.longitude
						})
					},
					fail: () => {
						console.log('地理位置获取失败');
					}
				});
			},
			testlist(){
				this.getList();
			},
			getList(la = 0, lo = 0) {
				var arr = [];
				map.getCenterLocation({
					success: res => {
						let latitude = res.latitude
						let longitude = res.longitude
						if (la !== 0) {
							latitude = la
							longitude = lo
						}
						console.log('当前中心坐标', latitude + ',' + longitude);
						uni.request({
							data: {
								latitude: latitude,
								longitude: longitude
							},
							method: 'POST',
							url: 'https://api.mymoyi.cn/api/moyicosmic/test/testList',
							success: res => {
								console.log('完成请求', res);

								if (res.data.code) {
									res = res.data.data;
									for (var i = 0; i < res.list.length; i++) {
										this.list = res.list;
									}
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
								}
								console.log('arr', arr)
							},
							complete: () => {
								this.load = false;
							}
						});
					}
				});

			},
			de(i) {
				console.log('i', i);
				let a = this.list[i.detail.markerId];
				uni.showModal({
					title: '用户：' + a.nickname,
					content: a.text
				});
			}
		}
	};
</script>

<style>
	.head{
		height: 200rpx;
		width: 100%;
	}
	.txt{
		margin-bottom: 100rpx;
	}
	.foot{
		margin-top: 50rpx;
	}
</style>
